import { DoubleLeftOutlined, DoubleRightOutlined, RedoOutlined, SettingOutlined, SyncOutlined, CloseOutlined } from '@ant-design/icons';
import { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { deletePath } from "@/redux/actions/index"
import { IconStyle, index_e, transformWidth_e } from "./config"
import { Popover } from "antd"
import { useStore } from 'react-redux'
import "./index.less"
import { useNavigate } from 'react-router-dom';

interface propsType {
    index: number,
    handlerChoose: Function,
    handlerUrl: Function,
    handlerLabel: Function,
    handlerReload: Function
}


export default function Label(props: propsType) {
    let scroll = useRef<HTMLDivElement>(null)
    let labelList = useSelector((state: any) => {
        return state.pathReducer
    })
    const dispatch = useDispatch()
    const router = useNavigate()
    //选中标签时
    const handlerChoose = (e: number, item: any) => {
        props.handlerChoose(e)
        props.handlerUrl(item.key)
        props.handlerLabel(item.keyPath)
    }

    // 关闭标签时的函数
    const store: any = useStore()
    const handlerCloseLabel = (e: number, item: any) => {
        dispatch(deletePath(item))
        let labelReducer = store.getState()?.pathReducer
        // debugger
        if (e == labelReducer.length && props.index == e) {
            props.handlerUrl(labelReducer[e - 1].key)
            props.handlerLabel(labelReducer[e - 1].keyPath)
            props.handlerChoose(e - 1)
        } else if (e < labelReducer.length && e != props.index - 1 && props.index > e) {
            props.handlerChoose(labelReducer.length - 1)
        } else if (props.index < e) {
            props.handlerChoose(props.index)
        } else {

            props.handlerUrl(labelReducer[e].key)
            props.handlerLabel(labelReducer[e].keyPath)
            props.handlerChoose(e)
        }
    }
    // 左右移动时的操作
    const views = useRef<HTMLDivElement>(null)
    let index = index_e
    let transformWidth = transformWidth_e
    const hanlderLeft = () => {
        let viewsDOM = views.current as HTMLDivElement
        if (index > 0) {
            index--
            viewsDOM.style.transform = `translateX(${-transformWidth * index}px)`
        }

    }
    const handlerRight = () => {
        let viewsDOM = views.current as HTMLDivElement
        let scrollDOM = scroll.current as HTMLDivElement
        let viewsOffsetRight = document.body.clientWidth - viewsDOM.offsetLeft - viewsDOM.offsetWidth + transformWidth * index
        let scrollOffsetRight = document.body.clientWidth - scrollDOM.offsetLeft - scrollDOM.offsetWidth
        if (viewsOffsetRight < scrollOffsetRight) {
            index++
            viewsDOM.style.transform = `translateX(${-transformWidth * index}px)`
        }
    }
    //重新加载标签
    const handlerReload = () => {
        props.handlerReload()
    }

    const outLogin = () => {
        router('/')
    }
    const content = (
        <div className='inner' style={{ width: "150px" }}>
            <div className='itemBtn' onClick={handlerReload}><SyncOutlined style={{ marginRight: "5px" }} />重新加载</div>
            <div className='itemBtn' onClick={outLogin}><CloseOutlined style={{ marginRight: "5px" }} /> 退出登录</div>
        </div>
    );


    return (
        <div className="home_label flex_a">
            <DoubleLeftOutlined style={IconStyle} onClick={hanlderLeft} />
            <div className='label_scroll flex_a' ref={scroll} >
                <div className='label_scroll_view flex_a'>
                    <div className='scroll_bar flex_a' ref={views} >
                        {
                            labelList.map((item: any, index: number) => (
                                <div className={`${props.index == index ? "label_choose" : ""} label flex_a`} onClick={(event) => {
                                    event.stopPropagation();
                                    event.preventDefault();
                                    return handlerChoose(index, item)
                                }} key={index * 100} >{item?.label} <div className={`${index == 0 ? "no_icon_close" : ""} close_icon`} onClick={(event) => {
                                    event.stopPropagation();
                                    event.preventDefault();
                                    return handlerCloseLabel(index, item)
                                }}>x</div></div>
                            ))
                        }
                    </div>
                </div>
            </div>
            <DoubleRightOutlined style={IconStyle} onClick={handlerRight} />
            <RedoOutlined style={IconStyle} onClick={handlerReload} />
            <Popover content={content} trigger="click" placement='bottomRight' overlayClassName={"propCard"} overlayInnerStyle={{ padding: "10px 0", transform: "translate(-8px)" }} >
                <SettingOutlined style={IconStyle} />
            </Popover>
        </div>
    )
}